<template>
    <div class="setFond">
        <div class="header">
            <div @click="$router.go(-1)"><img src="../../assets/image/assets-center/left-arrow.png" alt=""
                    class="w-14 h-27" /></div>
        </div>
        <div class="content">
            <van-radio-group class="verity-box" v-model="type" v-show="isShow" @change="changetype">
                <van-radio class="mt-30 mb-40" v-for="verifcode in verifcode_types" :key="verifcode.verifcode_type" :name="verifcode.verifcode_type" :label="verifcode.verifcode_type">
                    {{ getVerificationTypeText(verifcode.verifcode_type) }}
                </van-radio>
            </van-radio-group>          
            <p v-if="type == 1">{{ $t('verifyPhoneTips', { 'account': account }) }}</p>
            <p v-if="type == 2">{{ $t('verifyEmailTips', { 'account': account }) }}</p>
            <p v-if="type == 3">{{ $t('verifyGoogleTips') }}</p>
            <p v-if="type == 4">{{ $t('请先发送验证码，再联系客服领取验证码') }}</p>
            <div class="iptbox inputBackground">
              <textarea class="inputBackground textColor" ref="myTextarea" type="text" rows="1" :placeholder="$t('请输入验证码')" v-model.trim="verifcode"></textarea>
              <!--                <input class="inputBackground textColor" type="text" :placeholder="$t('请输入验证码')" v-model="verifcode">-->                <span v-if="isShow&&type != 3" @click="senCode">{{ $t('发送验证码') }} <template v-if="time"> ({{ time }})s</template></span>
            </div>
            <div class="btn btnMain" @click="submit">{{ $t('确定') }}</div>
            <div class="text-red mt-50 font-30 redline" @click="goService">
                {{ $t('如需帮助,联系在线客服')}}
            </div>
        </div>
    </div>
</template>

<script>
import { RadioGroup, Radio } from 'vant';
import { GET_USERINFO, SET_CONFIG } from '@/store/const.store';
import { mapActions } from 'vuex';
import ExInput from "@/components/ex-input";
import Axios from "@/API/login.js";
export default {
    props: {

    },
    components: {
        [RadioGroup.name]: RadioGroup,
        [Radio.name]: Radio,        
        ExInput,
    },
    data() {
        return {
            verifcode: "",
            username:"",
            password:"",
            timer:'',
            time:0,
            verifcode_types: [],
            type:0, // 选中的类型
            phoneArr:[], //手机数据
            emailArr:[], //邮箱数据
            account:"", //手机或邮箱账号
            isShow:false, //是否显示单选框
        }
    },
    mounted() {
      this.$refs.myTextarea.addEventListener('input', this.handleTextareaInput);
    },
    created() {
        this.username = this.$route.params.username;
        // this.password = this.$route.params.password;
        let verifyData = localStorage.getItem('verifyData');
        if (verifyData !== undefined && verifyData.length > 0) {
            try {
              //username也保存 防止用户先去客服后返回无法获取username
                let data = JSON.parse(verifyData)
                this.verifcode_types = data.verifcode_types
                this.username = data.username
            } catch (error) {
                console.error('Error parsing JSON:', error);
            }
        }
          //开启设备锁，显示单选框
          if(Array.isArray(this.verifcode_types) && this.verifcode_types.length>0){
           const hasVerifcodeType1 = this.verifcode_types.some(item => item.verifcode_type === "1"); 
           const hasVerifcodeType2 = this.verifcode_types.some(item => item.verifcode_type === "2");  
           this.phoneArr = hasVerifcodeType1 ? this.verifcode_types.filter(item => item.verifcode_type === "1"):[];
           this.emailArr = hasVerifcodeType2 ? this.verifcode_types.filter(item => item.verifcode_type === "2"):[];
           this.type = this.verifcode_types[0].verifcode_type;

           if(this.type==1){
             this.account = this.phoneArr.length>0 ? this.phoneArr[0].account:'';
           }else if(this.type==2) {
            this.account = this.emailArr.length>0 ? this.emailArr[0].account:'';
           }
           this.isShow = true;
        }else{
        //关掉设备锁时,不显示单选框
            let data = JSON.parse(verifyData)
            this.type = data.verifcode_type;
            this.account = data.account;
            this.isShow = true;
        }
    },
    methods: {
         ...mapActions('user', [GET_USERINFO, SET_CONFIG]),
        handleTextareaInput(){
          event.target.style.height = 'auto';
          event.target.style.height = event.target.scrollHeight + 'px';
        },
        changetype(){
           this.verifcode = ''
        },
        getVerificationTypeText(type) {
            switch (type) {
                case '1':
                return this.$t('手机验证');
                case '2':
                return this.$t('邮箱验证');
                case '3':
                return this.$t('谷歌验证');
                case '4':
                return this.$t('身份验证码');
                default:
                return '';
            }
        },                 
        submit(){
            if (this.verifcode.length<6){
                this.$toast(this.$t('请输入验证码'))
                return false
            }
            Axios.verifCodeLogin({
                username:this.username,
                // password:this.password,
                verifcode: this.verifcode,
                verifcode_type:this.type
            }).then((res) => {
                if(res.code==0){
                    this.GET_USERINFO(res.data)
                    this.SET_CONFIG() //获取判断是否乘以杠杆字段
                    this.$router.push('/home')
                    this.verifcode = "";
                }
            }).catch((error) => {
                if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}
            });
        },
        senCode(){
            if (this.time>0){
                return false
            }
            //如果选择身份码 target固定写死
            let obj = {}
            if(this.type == 4){
              obj = {
                target: 'device_id_h5',
                username: this.username
              }
            }else{
              obj = {
                target: this.account,
              }
            }
            Axios.sendVerifyCode(obj).then((res) => {
                this.time =30;
                this.timer = setInterval(() => {
                    if(this.time>0){
                        this.time = this.time - 1
                    }else{
                        this.time = 0;
                        clearInterval(this.timer)
                    }
                }, 1000);
            }).catch((error) => {
                if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}
            });
        },
        goService() {
            this.$router.push({
                name:'customerService',
                params:{
                    retMsg:false
                }
            })
        },
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
}

</script>

<style lang="scss" scoped>

.setFond {
    width: 100%;
    box-sizing: border-box;
    font-size: 26px;
    padding: 0 32px;
}

.header {
    display: flex;
    justify-content: space-between;
    padding: 0 26px;
    font-size: 28px;
    height: 100px;
    line-height: 100px;
}

.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 50px;
    margin-bottom: 60px;
}

.content{
    p{
        color: #868D9A;
        font-size: 30px;
        margin-bottom: 50px;
    }
    .iptbox {
        min-height: 88px;
        margin-top: 16px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 6px;
        textarea {
            flex: 1;
            height: 100%;
            border: none;
        }
        span{
            color: #1D91FF;
            margin-left: 32px;
        }
    }
}
.btn {
    color: #fff;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    margin-top: 40px;
    border-radius: 10px;
}

.redline{
    text-decoration: underline;
}

.verity-box{
    ::v-deep .van-radio__label {
        font-size: 34px !important;
        @include themify() {
            color: themed("text_color");
        }
    }
}
.redline{
    text-decoration: underline;
}
.verity-box{
    ::v-deep .van-radio__label {
        font-size: 34px !important;
        @include themify() {
          color: themed("text_color");
        }
    }
}
</style>